<template>
    <el-dialog :title="dialogText" :visible="true" width="50%" center top="40px" :lock-scroll="true"
        :close-on-press-escape="false" :close-on-click-modal="false" @close="cancel">
        <el-form ref="form" label-width="160px">

            <el-form-item label="名称" required>
                <el-input v-model="formData.title" placeholder="请输入文件名称" />
            </el-form-item>

            <el-form-item label="文件" required>
                <upload-files :url.sync="formData.link" :showToast="true" />
            </el-form-item>

            <el-form-item label="日期" required>
                <el-date-picker v-model="formData.updateAt" type="date">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {

    data() {
        return {
            formData: {
                title: "",
                link: "",
                updateAt: new Date()
            },
        }
    },

    computed: {
        dialogText() {
            return "添加";
        },

    },

    methods: {
        async handleSubmit() {
            const { topicId } = this.$route.query;

            const { title, link } = this.formData

            const rules = [
                {
                    case: !title,
                    message: "请输入文件",
                },
                {
                    case: !link,
                    message: "请上传材料附件",
                },
            ]

            const valid = this.$validForm(rules)

            if (!valid) {
                return
            }


            const res = await this.$fetch.post("/api/download/create", {
                ...this.formData,
                topicId,
            });

            if (res.code === 0) {
                this.$message.success("添加成功");
            }

            this.cancel();
        },

        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh")
        },

    }
}
</script>

<style lang="less" scoped></style>